<template>
  <div>
    <common-header :title="title"></common-header>
    <div class="search">
      <input class="search-input" v-model="keyword" type="text" placeholder="输入员工姓名/工号/部门">
      <button @click="search">搜索</button>
    </div>
    <div
      class="search-content"
      ref="search"
      v-show="searched"
    >
      <emp-list
        :emplist="list"
        v-show="! hasNoData"
      ></emp-list>
      <ul v-show="hasNoData">
        <li class="search-item border-bottom">没有找到匹配数据
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import CommonHeader from './components/commonHeader'
  import EmpList from './components/list'

  export default {
    name: "search",
    components: {
      CommonHeader,
      EmpList
    },
    props: {
      cities: Object
    },
    data() {
      return {
        'keyword': '',
        'list': [],
        'title': '员工查询',
        'searched': false
      }
    },
    computed: {
      hasNoData() {
        return !this.list.length
      }
    },
    methods: {
      search() {
        axios.get('/api/emplist/index/search/'+this.keyword + '/token/' + localStorage.getItem('token'))
          .then((res) => {
            this.list = res.data.data.data;
            this.searched = true
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    mounted() {
    }
  }
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl"
  .search
    height .72rem
    padding 0 .1rem
    background $bgColor
    .search-input
      width 80%
      box-sizing border-box
      height: .62rem
      padding 0 .1rem
      line-height .62rem
      text-align center
      border-radius .06rem
      color #666
    button
      background #068796
      color: white;
      border-radius: 10%;
      padding: .1rem;

  .search-content
    position: absolute
    top 1.58rem
    left: 0
    right: 0
    bottom 0
    z-index 1
    overflow hidden
    background #eee
    .search-item
      line-height: .62rem
      padding-left .2rem
      background #ffffff
      color #666

</style>
